<template>
  <div class="progressBar"></div>
  <div class="bg"></div>
</template>
<script setup lang="ts">
const props = defineProps({
  value: {
    type: Number,
    default: 50,
  },
})
const Size = computed(() => {
  return props.value + '%'
})
</script>
<style lang="less" scoped>
.progressBar {
  width: 200px;
  height: 26px;
  padding: 3px;
  margin: 0 10px;
  background: repeating-linear-gradient(90deg, rgba(0, 255, 204, 1) 0 10px, #0000 0 20px) 0/0%
    no-repeat content-box content-box;
  position: relative;
  transform: skewX(-30deg);
  background-size: v-bind(Size);
}

.bg {
  width: 200px;
  height: 26px;
  padding: 3px;
  margin: 0 10px;
  background: repeating-linear-gradient(90deg, rgba(204, 204, 204, 0.4) 0 10px, #0000 0 20px) 0/0%
    no-repeat content-box content-box;
  position: relative;
  transform: skewX(-30deg);
  background-size: 100%;
  position: absolute;
  // right: 10px;
  margin-left: 30px;
}
</style>
